// import { downloadTextFile } from "../../utils/file"
import { JSONStringify, downloadTextFile, canvasCut } from "../../utils/index";
import { defaultTheme, globalThemeJson } from "@/settings/chartThemes/index";
import { ElMessage } from "element-plus";
const chartEditStore = {
  namespaced: true,
  state: {
    selectedComponent: {}, //当前选中的组件
    selectElement: null, //选中的具体元素div,用于导出图片
    canvasPosition: {
      //canvas画布坐标，
      x: 0,
      y: 0,
    },
    editCanvas: {
      isDrag: false,
      lockScale: false,
      scale: 40,
    },
    editCanvasConfig: {
      name: "默认名称",
      width: 1920,
      height: 1080,
      projectName: undefined,
      // 默认背景色
      background: undefined,
      backgroundImage: undefined,
      // 是否使用纯颜色
      selectColor: true,
      // 全局配置
      chartThemeSetting: globalThemeJson,
      // chart 主题色
      chartThemeColor: "dark",
      // 自定义颜色列表
      chartCustomThemeColorInfo: undefined,
      // 适配方式
      previewScaleType: "fit",
      // 画布单位
      unit: "px",
    },
    renderComponentList: [], //渲染画布上的所有组件
    historyList: [], //历史列表
    currentIndex: 0, //当前渲染指针
    requestGlobalConfig: {
      //全局请求配置
      requestDataPond: [],
      requestOriginUrl: "http://10.10.78.74:19600/api/SfWorkTemplate/",
      requestInterval: 0, //轮询请求时间
      requestIntervalUnit: "second", //轮询请求时间单位
      requestParams: {
        Body: {
          "form-data": {},
          "x-www-form-urlencoded": {},
          json: "",
          xml: "",
        },
        Header: {},
        Params: {},
      },
    },
  },
  getters: {
    getStorageInfo(state) {
      return {
        editCanvasConfig: state.editCanvasConfig,
        componentList: state.renderComponentList,
      };
    },
    getComponentList(state) {
      return state.renderComponentList;
    },
    getEditCanvasConfig(state) {
      return state.editCanvasConfig;
    },
  },
  mutations: {
    SET_SELECTCOMPONENT(state, component) {
      state.selectedComponent = component;
      if (!component.key) {
        //当取消选中时，清空选中的元素
        state.selectElement = null;
      }
    },
    SET_EDITCANVAS(state, editCanvas) {
      for (let key in editCanvas) {
        state.editCanvas[key] = editCanvas[key];
      }
    },
    ADD_COMPONENTLIST(state, component) {
      state.renderComponentList.push(component);
      this.commit("chartEditStore/ADD_HISTORY");
    },
    DELETE_COMPONENTLIST(state, component) {
      state.renderComponentList.splice(
        state.renderComponentList.indexOf(component),
        1
      );
      state.selectedComponent = {};
      this.commit("chartEditStore/ADD_HISTORY");
    },
    MOVE_TOP_COMPONENT(state, component) {
      let zindex = state.renderComponentList.map((item) => item.attr.zIndex);
      component.attr.zIndex = Math.max(...zindex) + 1;
      this.commit("chartEditStore/ADD_HISTORY");
    },
    MOVE_BOTTOM_COMPONENT(state, component) {
      let zindex = state.renderComponentList.map((item) => item.attr.zIndex);
      component.attr.zIndex =
        Math.min(...zindex) <= 1 ? 1 : Math.min(...zindex) - 1;
      this.commit("chartEditStore/ADD_HISTORY");
      this.dispatch(
        "chartEditStore/fetchTargetIndex",
        state.selectedComponent.id
      ).then((res) => {
        state.renderComponentList.splice(res + 1);
      });
    },
    MOVE_UP_COMPONENT(state, component) {
      component.attr.zIndex++;
      this.commit("chartEditStore/ADD_HISTORY");
    },

    MOVE_DOWN_COMPONENT(state, component) {
      component.attr.zIndex =
        component.attr.zIndex <= 1 ? 1 : component.attr.zIndex - 1;
      this.commit("chartEditStore/ADD_HISTORY");
    },
    ADD_HISTORY(state) {
      // debugger
      if (state.currentIndex < state.historyList.length) {
        //当在有回退情况下在执行新动作 要把index后的动作清掉
        state.historyList.length = state.currentIndex;
      }
      state.historyList.push(
        JSON.parse(JSON.stringify(state.renderComponentList))
      );
      state.currentIndex += 1;
    },
    SET_FORWARD(state) {
      let currentIndex = state.currentIndex;
      if (currentIndex >= state.historyList.length) return;
      state.currentIndex += 1;
      state.renderComponentList = JSON.parse(
        JSON.stringify(state.historyList[state.currentIndex - 1] || [])
      );
    },
    SET_BACK(state) {
      let currentIndex = state.currentIndex;
      if (currentIndex <= 0) return;
      state.currentIndex -= 1;
      state.renderComponentList = JSON.parse(
        JSON.stringify(state.historyList[state.currentIndex - 1] || [])
      );
    },
    SET_EXPORT_PAGE() {
      downloadTextFile(
        JSONStringify(this.getters["chartEditStore/getStorageInfo"] || []),
        undefined,
        "json"
      );
    },
    SET_IMPORT_PAGE(state) {},
    SET_EXPORT_COMPONENT_IMG(state) {
      if (!state.selectElement) {
        return ElMessage.warning("下载前，请再次手动点击组件");
      }
      let line = state.selectElement.querySelector(".selected-line");
      line && state.selectElement.removeChild(line);
      canvasCut(state.selectElement);
      line && state.selectElement.appendChild(line);
    },
    SET_SELECT_ELEMENT(state, element) {
      state.selectElement = element;
    },
    SET_CHART_THEME_COLOR(state, element) {
      state.editCanvasConfig.chartThemeColor = element;
    },
    SET_EDITCANVAS_CONFIG(state, element) {
      const { type, key } = element;
      state.editCanvasConfig[type] = key;
    },
    SET_CANVAS_POSITION(state, position) {
      state.canvasPosition = position;
    },
  },
  actions: {
    fetchTargetIndex({ state }, id) {
      // 找到选中组件的下标
      const targetIndex = state.renderComponentList.findIndex(
        (e) => e.id === id
      );
      return targetIndex;
    },
  },
};

export default chartEditStore;
